<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./css/视错觉艺术.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <title>视错觉艺术</title>
</head>

<body>
    <div class="container">
        <div class="header">
            <div class="left">
                <img src="./images/nav-btn.gif" alt="" align="left" width="25px">
                <h1>拓扑宇宙艺术馆</h1>
            </div>
            <div class="right">
                <a href="./index.html" style="color: black;">
                    <h1>首页</h1>
                </a>
                <img src="./images/fdj.png" width="25px" alt="">
            </div>
        </div>
    </div>

    <div class="banner">
        <video src="./video/圆圈循环.mp4" autoplay loop controls="controls"></video>
    </div>

    <div class="container2">
        <div class="content">
            <div class="box1">
                <p>视错觉，大家应该不会陌生，就是说我们在看某样东西的时候可能会产生的错觉，在理论上，这是“指观察者在客观因素干扰下或者自身的心理因素支配下，对图形产生的与客观事实不相符的错误的感觉”。
                </p>
            </div>
            <br><br><br>
            <div class="box2">
                <div class="img">
                    <img src="./images/04.png" width="750px" alt="" align="center">
                </div>
                <p>这是视错觉大赛一等奖作品，作者通过几个凹槽就达到让小球产生会“上坡”的错觉，这简直就是牛顿的噩梦，违反物理学常规的现象。</p>
            </div>
            <div class="square">
                <a href="https://v3d.net/h3o  "><img src="./images/02.png" width="65px" alt=""></a>
            </div>
            <div class="box2 box3">
                <div class="img">
                    <img src="./images/03.png" width="750px" alt="" align="center">
                </div>
                <p>这是艾姆斯窗视错觉，一张薄薄的纸片就足以将你玩弄其中，让你分不清是真是幻。 一扇窗户，它在旋转。你会发现它似乎总是在左右来回摆动。但事实是，这个窗户一直在沿一个方向旋转，是你的眼睛欺骗了你。
                    这个实验的神奇之处在于： 即使你知道了它背后的所有原理，视错觉仍然会发生，你仍然会不由自主地被你的眼睛欺骗。</p>
            </div>
            <div class="square">
                <a href="https://v3d.net/h3j "><img src="./images/02.png" width="65px" alt=""></a>
            </div>
            <div class="box2 box4">
                <div class="img">
                    <img src="./images/05.png" width="750px" alt="" align="center">
                </div>
                <p>这是非常著名的视错觉恐龙，无论你怎么转动都会感觉恐龙在盯着你看，这种错觉的学名是“凹脸错觉”，一种经典视错觉现象。我们的大脑看到恐龙之后，本能的认为这是凸面的恐龙脸，但模型其实是凹面的，这就产生了信息处理上的矛盾，造成我们认为凹陷的脸反向运动起来的错觉。
                </p>
            </div>
            <div class="square">
                <a href="https://v3d.net/h3h "><img src="./images/02.png" width="65px" alt=""></a>
            </div>
            <br><br>
        </div>
    </div>
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide text-t1"><img src="images/lbt1.gif" width="200px" height="200px" alt=""></div>
            <div class="swiper-slide text-t2"><img src="images/lbt2.gif" width="200px" height="200px" alt=""></div>
            <div class="swiper-slide text-t3"><img src="images/lbt3.gif" width="200px" height="200px" alt=""></div>
            <div class="swiper-slide text-t4"><img src="images/lbt4.gif" width="200px" height="200px" alt=""></div>
            <div class="swiper-slide text-t5"><img src="images/lbt5.gif" width="200px" height="200px" alt=""></div>
            <div class="swiper-slide text-t6"><img src="./images/lbt6.png" width="200px" height="200px" alt=""></div>
        </div>
    </div>
    <br><br>
    <script src="./js/swiper.min.js"></script>

    <script>
        var mySwiper = new Swiper('.swiper', {
            slidesPerView: 3,
            loop: true, // 循环模式选项
            speed: 3000, //图片切换速度
            autoplay: true,  //图片自动切换
            grabCursor: true,  //鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
        })        
    </script>
</body>

</html>